<template>
  <view>
    <view class="cu-custom" :style="[{ height: customBarHeight + 'px' }]">
      <view
        class="cu-bar fixed"
        :style="style"
        :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]"
      >
        <view class="action" @tap="backPage" v-if="isBack">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <view class="content" :style="[{ top: statusBarHeight + 'px' }]">
          <slot name="content"></slot>
        </view>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

// Props definition
const props = defineProps({
  bgColor: {
    type: String,
    default: "",
  },
  isBack: {
    type: [Boolean, String],
    default: false,
  },
  bgImage: {
    type: String,
    default: "",
  },
});

// System info
const statusBarHeight = ref(0);
const customBarHeight = ref(0);

uni.getSystemInfo({
  success: (e) => {
    statusBarHeight.value = e.statusBarHeight;
    // #ifdef MP-WEIXIN
    const custom = uni.getMenuButtonBoundingClientRect();
    customBarHeight.value = custom.bottom + custom.top - e.statusBarHeight;
    // #endif
    // #ifndef MP-WEIXIN
    customBarHeight.value =
      e.platform === "android"
        ? e.statusBarHeight + 50
        : e.statusBarHeight + 45;
    // #endif
  },
});

// Computed style for the bar
const style = computed(() => {
  let styleString = `height:${customBarHeight.value}px;padding-top:${statusBarHeight.value}px;`;
  if (props.bgImage) {
    styleString += `background-image:url(${props.bgImage});`;
  }
  return styleString;
});

// Methods
const backPage = () => {
  uni.navigateBack({
    delta: 1,
  });
};
</script>

<style></style>
